
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search, ArrowDown } from "@element-plus/icons-vue";
import { usePublicStoreHook } from "@/store/modules/public";
import { useUserStore } from "@/store/modules/user";
import { fetchGetUserList } from '@/api/user'
import { filterCollege, filterGrade, filterMajor } from '@/utils/filter'
import { filterDate } from "@/utils/format";
import { fetchGetSocietyList } from "@/api/society";
import { fetchGetActivityList } from "@/api/activity";

// 表单数据
let tableData = reactive([])
let tableData3 = reactive([]) // 活动抽屉数据
const total = ref<number>(0)// 列表总数
// 实际传递的条件
let listQuery = reactive({
  currentPage: 1,
  name: undefined, // 姓名
  gender: undefined, // 类型
  college: undefined, // 学院
  major: undefined, // 专业
  grade: undefined, // 年级
  pageSize: 10,
})
// 显示在界面上的查询条件
const showQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  gender: undefined, // 类型
  college: undefined, // 学院
  major: undefined, // 专业
  grade: undefined, // 年级
  pageSize: 10,
})
// 查询
const handleSearch = () => {
  getPageList()
}
// 社团类型
let typeOptions = ref([
  {
    id: 0,
    name: '男'
  },
  {
    id: 1,
    name: '女'
  },
])

const tableLoading = ref(false)
const tableLoading3 = ref(false)

// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  listQuery = showQuery
  const res = await fetchGetUserList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  tableData = data
  tableLoading.value = false
}

const collegeList = ref([{
  id: '',
  name: ''
}])
collegeList.value = usePublicStoreHook().collegeList
const majorList = ref([{
  id: '',
  name: ''
}])
majorList.value = usePublicStoreHook().majorList
const gradeList = ref([{
  id: '',
  name: ''
}])
gradeList.value = usePublicStoreHook().gradeList


// 抽屉信息
let table2 = ref(false) // 人员管理抽屉
let table3 = ref(false) // 参与活动
let tableData2 = reactive([]) // 表单数据
const total2 = ref<number>(0)// 活动人员列表总数
const total3 = ref<number>(0)// 活动人员列表总数
// 实际传递的条件
let listQuery2 = reactive({
  currentPage: 1,
  pageSize: 10,
  society: [48, 49, 50]
})
const listQuery3 = reactive({
  currentPage: 1,
  name: undefined, // 名称
  type: undefined, // 类型
  status: undefined, // 招新状态
  pageSize: 10,
  form: undefined, // 活动形式
  person: null
})
// 获取列表
const getPageList2 = async () => {
  const res = await fetchGetSocietyList(listQuery2)
  const { currentPage, data } = res.data
  listQuery2.currentPage = showQuery.currentPage = currentPage
  total2.value = res.data.total
  tableData2 = data
}
const getPageList3 = async () => {
  tableLoading3.value = true
  const res = await fetchGetActivityList(listQuery3)
  const { currentPage, data } = res.data
  listQuery3.currentPage = currentPage
  total3.value = res.data.total
  tableData3 = data
  tableLoading3.value = false
}

// 点击社团
const handleSociety = () => {
  table2.value = true
  getPageList2()
}
// 点击活动列表
const handleActivity = (row: any) => {
  table3.value = true
  listQuery3.person = row.id
  getPageList3()
}
// 点击删除
const handleDelete = () => {
  ElMessageBox.confirm(`当前操作会删除该人员，是否继续？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // fetchPutGoods()
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      getPageList()
    })
    .catch(() => { });
}
const customColors = [
  { color: '#38EF7D', percentage: 20 },
  { color: '#2FDC80', percentage: 40 },
  { color: '#25C585', percentage: 60 },
  { color: '#1BAF8A', percentage: 80 },
  { color: '#11998D', percentage: 100 },
]
// 过滤活动类型
const filterActivityType = (val: number) => {
  switch (val) {
    case 0:
      return '社团活动'
    case 1:
      return '院级活动'
    case 2:
      return '校级活动'
  }
}
onMounted(() => {
  getPageList()
})
</script>


<template>
  <div class="society-content container">
    <!-- 查询 -->
    <div class="header flex flex-center">
      <el-input v-model="showQuery.name" placeholder="姓名" clearable />
      <el-select v-model="showQuery.gender" class="m-2" placeholder="性别" clearable>
        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="showQuery.college" class="m-2" placeholder="学院" clearable>
        <el-option v-for="item in collegeList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-select v-model="showQuery.major" class="m-2" placeholder="专业" clearable>
        <el-option v-for="item in majorList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-select v-model="showQuery.grade" class="m-2" placeholder="年级" clearable>
        <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
        查询
      </el-button>
    </div>

    <!-- 表单 -->
    <el-table :data="tableData" stripe v-loading="tableLoading">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="stuCode" label="学号" show-overflow-tooltip />
      <el-table-column prop="name" label="姓名" show-overflow-tooltip />
      <el-table-column prop="phone" label="手机号" show-overflow-tooltip />
      <el-table-column prop="gender" label="性别" show-overflow-tooltip>
        <template #default="scope">
          <div>{{ scope.row.gender == 0 ? '男' : '女' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="college" label="学院" min-width="100">
        <template #default="scope">
          <div>{{ filterCollege(scope.row.college) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="major" label="专业" min-width="100">
        <template #default="scope">
          <div>{{ filterMajor(scope.row.major) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="年级">
        <template #default="scope">
          <div>{{ filterGrade(scope.row.grade) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="加入时间" min-width="100">
        <template #default="scope">
          <div>{{ filterDate(scope.row.createdAt) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="年级">
        <template #default="scope">
          <div>{{ filterGrade(scope.row.grade) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="role" label="角色">
        <template #default="scope">
          <div :class="scope.row.role == 0 ? 'theme-blue' : 'theme-error'">{{ scope.row.role == 0 ? '普通会员' : '会长/部长' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作">
        <template #default="scope">
          <el-dropdown trigger="click">
            <el-button type="primary" class="btn-green" :icon="ArrowDown">
              选择操作
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleSociety">社团信息</el-dropdown-item>
                <el-dropdown-item @click="handleActivity(scope.row)">活动信息</el-dropdown-item>
                <!-- <el-dropdown-item @click="handleDelete">删除人员</el-dropdown-item> -->
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize" hide-on-single-page
      @pagination="getPageList" />


    <!-- 社团列表抽屉 -->
    <el-drawer v-model="table2" direction="rtl" size="40%">
      <template #header="{ titleId }">
        <h1 :id="titleId">参与的社团</h1>
      </template>
      <div class="el-drawer-content">
        <el-table :data="tableData2" stripe>
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="name" label="社团名称" show-overflow-tooltip />
          <el-table-column prop="introduce" label="社团简介" show-overflow-tooltip />
          <el-table-column label="社团角色" show-overflow-tooltip>
            <template #default="scope">
              <div :class="tableData2.length > 1 ? 'theme-blue' : 'theme-error'">{{ scope.row.role == 0 ? '会长/部长' : '普通会员'
              }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>


    <!-- 参与活动抽屉 -->
    <el-drawer v-model="table3" direction="rtl" size="65%">
      <template #header="{ titleId }">
        <h1 :id="titleId">参与的社团</h1>
      </template>
      <div class="el-drawer-content">
        <el-table :data="tableData3" stripe v-loading="tableLoading3">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="name" label="活动名称" show-overflow-tooltip />
          <el-table-column prop="address" label="活动地点" show-overflow-tooltip />
          <el-table-column prop="activityForm" label="活动形式" show-overflow-tooltip width="100">
            <template #default="scope">
              <div class="flex flex-center">
                <div class="student-button">{{ scope.row.form == 0 ? '线上' : '线下' }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="活动类型">
            <template #default="scope">
              <div class="flex flex-center">
                <div class="student-button">{{ filterActivityType(scope.row.type) }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="二课分" width="80">
            <template #default="scope">
              <div class="theme-success">
                {{ scope.row.score }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="percentage" label="报名进度" width="250">
            <template #default="scope">
              <el-progress :percentage="Number((scope.row.nowNumber / scope.row.planNumber * 100).toFixed(1))"
                :color="customColors" :stroke-width="12" />
            </template>
          </el-table-column>
          <el-table-column prop="minister" label="剩余名额">
            <template #default="scope">
              <div>{{ scope.row.planNumber - scope.row.nowNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="活动状态" width="120">
            <template #default="scope">
              <div v-if="scope.row.status == 0" class="theme-info">报名未开始</div>
              <div v-if="scope.row.status == 1" class="theme-success">报名中</div>
              <div v-if="scope.row.status == 2" class="theme-error">报名结束</div>
              <div v-if="scope.row.status == 3" class="theme-blue">活动进行中</div>
              <div v-if="scope.row.status == 4" class="theme-info">活动已结束</div>
              <div v-if="scope.row.status == 5" class="theme-error">活动已取消</div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :total="total3" v-model:page="listQuery3.currentPage" v-model:limit="listQuery3.pageSize"
          hide-on-single-page @pagination="getPageList3" />
      </div>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.society-content {
  min-height: 45rem;
  display: grid;
  grid-template-rows: 8rem auto;
  gap: 2rem;

  .header {
    border: 2px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .el-input,
    .el-select {
      margin-right: 20px;
      width: 16%;
    }
  }
}
</style>

